<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今天的命运小占卜 - MBTI运势测试</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 欢迎页 -->
    <div id="welcome-page" class="page active">
        <div class="welcome-container">
            <h1 class="title">今天的命运小占卜</h1>
            <div class="star-animation">
                <div class="star">⭐</div>
                <div class="star">✨</div>
                <div class="star">🌟</div>
            </div>
            <p class="subtitle">通过8道趣味问题，发现你的MBTI人格与今日运势</p>
            <button id="start-btn" class="cute-button">开始占卜 💫</button>
        </div>
    </div>

    <!-- 问题页 -->
    <div id="question-page" class="page">
        <div class="progress-bar">
            <div id="progress" class="progress-fill"></div>
        </div>
        <div class="question-container">
            <div class="question-number">第 <span id="current-q">1</span> / 8 题</div>
            <h2 id="question-text" class="question-text"></h2>
            <div class="options-container">
                <button id="option-a" class="option-btn option-a"></button>
                <button id="option-b" class="option-btn option-b"></button>
            </div>
        </div>
    </div>

    <!-- 结果页 -->
    <div id="result-page" class="page">
        <div class="result-container">
            <h2 class="result-title">你的今日人格</h2>
            <div class="mbti-result">
                <div id="mbti-type" class="mbti-type"></div>
                <div id="mbti-title" class="mbti-title"></div>
            </div>
            <div class="character-image">
                <div id="character-emoji" class="character-emoji"></div>
            </div>
            <div class="fortune-section">
                <div class="fortune-item">
                    <span class="fortune-label">今日综合运势</span>
                    <div id="fortune-stars" class="fortune-stars"></div>
                </div>
                <div class="fortune-details">
                    <div class="fortune-detail">
                        <span class="detail-label">💕 爱情运势</span>
                        <span id="love-fortune" class="detail-value"></span>
                    </div>
                    <div class="fortune-detail">
                        <span class="detail-label">💼 事业运势</span>
                        <span id="work-fortune" class="detail-value"></span>
                    </div>
                    <div class="fortune-detail">
                        <span class="detail-label">🎨 幸运色</span>
                        <span id="lucky-color" class="detail-value"></span>
                    </div>
                    <div class="fortune-detail">
                        <span class="detail-label">🍀 幸运物</span>
                        <span id="lucky-item" class="detail-value"></span>
                    </div>
                </div>
            </div>
            <div class="tip-section">
                <div class="tip-title">💡 今日小贴士</div>
                <div id="daily-tip" class="tip-content"></div>
            </div>
            <div class="action-buttons">
                <button id="share-btn" class="cute-button share-btn">分享给闺蜜 📱</button>
                <button id="restart-btn" class="cute-button restart-btn">再测一次 🔄</button>
            </div>
        </div>
    </div>

    <!-- 分享弹窗 -->
    <div id="share-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h3>分享你的占卜结果</h3>
            <div id="share-image" class="share-image"></div>
            <button id="download-btn" class="cute-button">保存图片 📸</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>